import React, { PureComponent, Fragment } from 'react';
import {
  Table,
  Button,
  Drawer,
  Checkbox, message,
} from 'antd';
import { connect } from 'dva/index';

const CheckboxGroup = Checkbox.Group;

@connect(({ roleModels, loading }) => ({
  roleModels,
  loading: loading.models.roleModels,
}))

class SetPower extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: [],
      selectIndex: '',

      checkedList: [],
    };

  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.setPowerVisible) {

      const { rolePermission } = this.props;
      let arr = [];
      rolePermission.map((item) => {
        if (item.permission.length > 0) {
          item.permission.forEach((btn) => {
            if (btn.check) {
              arr.push(btn.permissionNo);
            }
          });
        }
      });
      this.setState({
        checkedList: arr,
      });
    }
  }

  columns = [
    {
      title: '模块',
      width: '200px',
      key:'dataIndex',
      render: text => {
        return (
          text.moduleName
        );
      },
    },
    {
      title: '方法',
      dataIndex: 'permission',
      key: 'permission',
      render: text => {
        const arr = [];
        text.map((item) => {
          let obj = {
            label: item.permissionName,
            value: item.permissionNo,
            key: item.permissionNo,
          };
          arr.push(obj);
        });
        return <CheckboxGroup
          options={arr} rowKey={'permissionNo'} value={this.state.checkedList}
          onChange={this.onChange(arr, text)}/>;
      },
    }];
  onChange = (arr, rolData) => {
    return (checkedList) => {
      this.setState({
        checkedList,
      });

    };
  };


  render() {
    const { roleModels: { rolePermission }, dispatch, selectedRows, handlePower, setPowerVisible } = this.props;
    const { checkedList } = this.state;

    const setPower = () => {

      handlePower(false, [])
      dispatch({
        type: 'roleModels/rolebingpowe',
        payload: {
          roleNo: selectedRows.roleNo,
          permissionNos: checkedList,
        },
        callback(response) {
          if (response.code === 200 && !response.msg) {
            message.success('设置成功');
          } else {
            message.error(response.errMsg);
          }
        },
      });
    };
    return (
      <Drawer
        title="角色权限设置"
        width={720}
        onClose={() => handlePower(false, [])}
        visible={setPowerVisible}
        style={{
          overflow: 'auto',
          height: 'calc(100% - 108px)',
        }}
      >
        <Table columns={this.columns}
               rowKey={'permissionNo'}
               dataSource={rolePermission}/>,
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={() => handlePower(false, [])} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={setPower} type="primary">
            保存
          </Button>
        </div>
      </Drawer>
    );
  }
}

export default SetPower;
